<template>
  <div class="pageTop wow fadeInDown">
    <sequence fileName="topbg/topbg_" fileLength="74" IntervalTime="50"></sequence>
    <div class="left">
      <div class="leftTop">
        <div class="date">{{ formattedDate }}</div>
      </div>
      <div class="leftBottom">
        <tab :list="navList"></tab>
      </div>
    </div>
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div class="right">
      <div class="rightTop">
        <div class="userInfo">
          <i class="icon iconfont icon-yonghu"></i>
          <span>admin</span>
          <div class="logOut cur" @click="logOut">
            <i class="icon iconfont icon-tuichudenglu"></i>
          </div>
        </div>
      </div>
      <div class="rightBottom">
        <tab :list="navList2"></tab>
        <el-dropdown>
          <tab :list="navList3"></tab>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="navigate('/user/list')">用户管理</el-dropdown-item>
              <el-dropdown-item @click.native="navigate('/organization')">组织机构</el-dropdown-item>
              <el-dropdown-item @click.native="navigate('/errorInfo')">故障信息管理</el-dropdown-item>
              <el-dropdown-item @click.native="navigate('/log')">日志记录</el-dropdown-item>
              <el-dropdown-item @click.native="navigate('/camera/list')">摄像头管理</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import sequence from "./sequence/index.vue"
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 导入中文语言包
dayjs.locale('zh-cn'); // 使用中文语言包
import tab from './tab/tab.vue'

export default {
  name: "pageTop",
  components: {sequence, tab},
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formattedDate: '',
      interval: null,
      navList: [{
        name: '电子地图',
        url: '/'
      }, {
        name: '告警预警',
        url: '/forewarning'
      }, {
        name: '告警查询',
        url: '/alarmQuery'
      }],
      navList2: [{
        name: '数据统计',
        url: '/statistics'
      }, {
        name: '告警设置',
        url: '/alarmSetting'
      }],
      navList3: [{
        name: '系统管理',
        url: '/systemManagement'
      }],
    }
  },
  mounted() {
    this.updateDate();
    this.interval = setInterval(this.updateDate, 1000); // 每秒更新日期
  },
  beforeUnmount() {
    clearInterval(this.interval); // 在组件销毁前清除间隔
  },
  methods: {
    navigate(routePath) {
      this.$router.push(routePath);
    },
    logOut() {
      this.$router.push('/login')
    },
    updateDate: function () {
      const date = dayjs(); // 获取当前日期和时间
      this.formattedDate = date.format('YYYY-MM-DD HH:mm:ss dddd'); // 格式化为 2023-08-08 星期二
      // 生成列表
    }
  }
}
</script>

<style lang="scss" scoped>
.pageTop {
  width: 100%;
  height: 140px;
  display: flex;
  //background: #021b38;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: absolute;
  z-index: 0;

  .left {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    width: calc(30% - 30px);
    margin-left: 30px;

    .leftTop {
      .date {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 400;
        color: #4EC7FF;
        margin-top: 10px;
      }
    }

    .leftBottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      margin-top: 10px;
    }

  }

  .right {
    width: calc(30% - 30px);
    margin-right: 30px;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .userInfo {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      span {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 400;
        color: #fff;
        margin-left: 10px;
        margin-right: 10px;
      }

      i {
        font-size: 16px;
        font-family: PingFang;
        font-weight: 400;
        color: #4EC7FF;
      }
    }

    .rightTop {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .rightBottom {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    :deep(.rightBottom) {
      .tabs .tab {
        margin-left: 10px;
        margin-right: 0;
      }
    }
  }

  .title {
    position: relative;
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      font-size: 40px;
      font-family: PangMenZhengDao;
      letter-spacing: 5px;
      font-weight: 800;
      color: #FFFFFF;
      margin-top: 25px;
      background: linear-gradient(0deg, #00A8FF 0%, #00EAFF 30.322265625%, #00A8FF 66.3818359375%, #00EAFF 98.3642578125%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
